<template>
  <div class="main-div">

    <Row>
      <Col span="4">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </Col>
      <Col span="20">
        <Card dis-hover class="task-card">
          <div class="app-container">
            <el-alert type="warning" title="如果流程解析时长超过2分钟，请联系盘古流程小助手进行流程优化。" style="margin-top: 10px;margin-bottom: 10px;"></el-alert>
            <el-row type="flex" justify="start" style="margin-left: -28px">
              <el-form :inline="true" :model="queryForm" class="demo-form-inline" size='mini'>

                <el-form-item label="时间区间">
                  <el-date-picker
                    v-model="queryDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    prop="startTimeDate"
                    label="开始时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="endTimeDate"
                    label="结束时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="耗时(毫秒)"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="deploymentId"
                    label="部署ID"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="key"
                    label="流程别名"
                    show-overflow-tooltip
                  >
                  </el-table-column>

                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
  </div>


</template>

<script>
  import {getAllTaskData, getTaskChartData, getBpmnModelCategory,saveSubTask} from "@/api/analy";
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'
  import {
    getXmlParserReport,
  } from "@/api/report";
  export default {
    name: 'Task',
    components: {
      userMultipleDialog
    },

    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        show: false,
        existData: [],
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        chartData: {},
        shopName: [],
        addSubTask: {
          model: false,
          strategyId: "2",
          usersInfo: [],
          parentTaskId: '',
          multiPlayerStrategyId: '1',
          handlerId: ''
        },
        alias: 'addSubTask',
        addSubTaskRuleValidate: {
          handlerId: [
            {required: true, message: '办理人必须填写', trigger: 'blur'}
          ],
          option: [
            {required: true, message: '意见必须填写', trigger: 'blur'}
          ]

        },
        queryForm: {
          name: "",
          start: "",
          end: "",
          page: 0,
          limit: 10,
          typeKey: ""
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      resetQuery:function(){
        this.queryForm.name = "";
        this.queryForm.start = "";
        this.queryForm.end = "";
        this.queryForm.typeKey = "";

        this.queryForm.page = 0;
        this.queryDate = [];
      },
      delCommonUsers: function (index) {
        this.addSubTask.usersInfo.splice(index, 1)
      },
      confirmDialogEvent: function (data) {
        if (data) {
          this.addSubTask.usersInfo = data;
          var str = "";
          for (var i = 0; i < data.length; i++) {
            str += data[i].userNo+ ",";
          }
          //去掉最后一个逗号(如果不需要去掉，就不用写)
          if (str.length > 0) {
            str = str.substr(0, str.length - 1);
          }
          this.addSubTask.handlerId=str;



        }
      },
      selectUsers: function () {
        this.show = true
      },
      queryFormCreateTime: function (e) {
        if(e){
          this.queryForm.startTime=e[0]
          this.queryForm.endTime=e[1]
        }

      },
      handleAddSubTaskReset: function () {
        this.handleReset()
        this.existData=[]
        this.addSubTask.model = false;
      },
      refreshTask: function (data) {
        if (data[0].parentId == '-1') {
          this.queryForm.typeKey = ""
        } else {
          this.queryForm.typeKey = data[0].typeKey;

        }
        this.queryForm.createTime = ""
        this.queryDate = [];
        this.getData()

      },
      queryMethod: function () {
        var name = this.queryForm.name;
        var whereSql = '';
        var createTime = this.queryForm.createTime;
        getXmlParserReport(this.queryForm).then((response) => {
          this.tableData = response.data
          if (response.count.length > 0) {
            this.total = parseInt(response.count);
          } else {
            this.total = 0;
          }

        })

      },

      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
      this.getTaskData();
      },
      getTaskData:function(){
        getXmlParserReport(this.queryForm).then((response) => {
          this.tableData = response.data
          if (response.count.length > 0) {
            this.total = parseInt(response.count);
          } else {
            this.total = 0;
          }

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(data) {
        this.$router.push({name: 'handleRunTask', query: {t: new Date().getTime(), "taskId": data.id,"scopeType":data.scopeType,"monitor":true}})
      },
      handleAddSubNodeClick(data) {
        this.addSubTask.model = true
        this.addSubTask.parentTaskId = data.id
      },
      handleReset() {
        this.addSubTask.usersInfo = [];
        this.addSubTask.handlerId = '';
        this.addSubTask.strategyId = '1';
      },
      search() {
        this.queryForm.page = 0
        if (this.queryDate){

          this.queryForm.start=this.queryDate[0]
          this.queryForm.end=this.queryDate[1]
        }

        this.queryMethod()

      },

      addSubTaskHandler() {
        this.$refs['addSubTask'].validate((valid) => {
          if (valid) {
            const obj = JSON.parse(JSON.stringify(this.addSubTask))
            delete (obj['usersInfo'])
            delete (obj['model'])

            saveSubTask(obj).then((response) => {
              if (response.code == 0) {
                this.$message({"duration":800,message:'添加成功',type:'warning',customClass:'zZindex'});

                this.addSubTask.model=false
                this.handleReset()
                this.getTaskData();
              } else {
                this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

              }
            })
          } else {

          }
        })
      },

      reset() {

        this.resetQuery();
        this.getData()
      },


    }

  }

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

</style>
